<template>
	<view>
		<view
			class="nav_topbar"
			:style="[{ height: customBarH + 'px', 'padding-top': statusBarH + 'px', color: titleTintColor, background: 'linear-gradient(to right, #ff6163 , #e9385d)' }]"
		>
			<!-- 返回 -->
			<view v-if="isBack" @tap="goBack" class="nav_topbar_left">
				<slot name="back"></slot>
				<slot name="headerL"></slot>
			</view>
			<view v-if="!isBack" class="nav_topbar_left">
				<slot name="back"></slot>
				<slot name="headerL"></slot>
			</view>
			<!-- 标题 -->
			<view class="nav_topbar_title" :style="[{ 'font-size': '16px', 'padding-left': '0', 'font-weight': '700' }]">
				{{ title }}
				<slot name="nav_topbar_title_img"></slot>
			</view>
			<!-- 右侧 -->
			<view class="nav_topbar_right">
				<slot name="iconfont"></slot>
				<slot name="string"></slot>
				<slot name="image"></slot>
				
			</view>
		</view>
		<view :style="style"></view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net } from '@/common/tools.js';
export default {
	name: 'navigation',
	data() {
		return {
			statusBarH: this.statusBar,
			customBarH: this.customBar
		};
	},
	props: {
		isBack: { type: [Boolean, String], default: true },
		title: { type: String, default: '' },
		titleTintColor: { type: String, default: '#ffffff' }
	},
	computed: {
		style() {
			let _style = `height: ${this.customBarH + this.statusBar}px;`;
			return _style;
		}
	},
	methods: {
		goBack() {
			// #ifndef H5
			uni.navigateBack();
			this.Tab.getInstance().show();
			// #endif
			// #ifdef H5
			history.back();
			// #endif
		}
	}
};
</script>

<style lang="scss">
.nav_topbar {
	position: fixed;
	width: 100%;
	display: flex;
	align-items: center;
	z-index: 1;
	.nav_topbar_left {
		flex: 1;
		padding-left: 10px;
		display: flex;
	}
	.nav_topbar_title {
		text-align: center;
		flex: 3;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}
	.nav_topbar_right {
		flex: 1;
		padding-right: 10px;
		text-align: right;
		font-size: 16px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
}
</style>
